<template>
	<view class="root">
		<view class="top">
			<search></search>
		</view>
		<scroll-view scroll-x class="scrollNav">
			<view class="item" :class="index==navIndex?'active':''" v-for="(item,index) in navArr"
				@click="clickNav(index,item.id)" :key="item.id">
				{{item.classname}}
			</view>
		</scroll-view>

		<view class="content">
			<view class="row" v-for="(item,index) in listArr" :key="item.id">
				<!-- 对组件特殊赋值 -->
				<passage :item="item"></passage>
			</view>
		</view>
		<view class="nodata" v-if="listArr.length==0">
			<!-- 以宽度为基准 -->
			<image src="../../static/image/nodata.png" mode="widthFix"></image>
		</view>
		<!-- 有数据才显示 -->
		<view class="loading" v-if="listArr.length!=0">
			<view v-if="load==1">数据加载中...</view>
			<view v-if="load==2">没有更多了~~~</view>
		</view>
	</view>
</template>
<script>
	import {
		parseTime
	} from "@/utils/tool.js"
	import {
		getLimitArticle
	} from "@/api/user.js"
	export default {
		data() {
			return {
				navIndex: 0,
				navArr: [{
					id: 0,
					classname: "疾病诊疗"
				}, {
					id: 1,
					classname: "营养保健"
				}, {
					id: 2,
					classname: "医学科普"
				}, {
					id: 3,
					classname: "互动问答"
				}, {
					id: 4,
					classname: "中医养生"
				}, {
					id: 5,
					classname: "其他"
				}],
				listArr: [],
				nowPage: 1,
				pageSize: 10,
				load: 0 //0默认 1加载中 2没有更多了
			}
		},
		onLoad() {
			// this.getNavData();
			this.getListData(this.navIndex);
		},
		onReachBottom() { //触底设置
			if (this.load == 2) {
				return;
			}
			this.nowPage++;
			this.load = 1;
			this.getListData(this.navIndex);
			console.log("load=", this.load);
		},
		methods: {
			clickNav(index, id) { ///初始化【id是类别】
				this.navIndex = index;
				this.nowPage = 1;
				this.listArr = [];
				this.load = 0;
				this.getListData(id);
			},
			getListData(id = 0) { //默认50
				getLimitArticle({
					classid: id,
					page: this.nowPage,
					pageSize: this.pageSize
				}).then(res => {
					console.log("请求API接口【/user/getLimitArticle】", res);
					if (res.data.length == 0) {
						this.load = 2;
						// console.log('没数据了', this.load);
					}
					for (let index = 0; index < res.data.length; index++) {
						res.data[index].time = parseTime(res.data[index].time); //可以往里面传long
					}
					this.listArr = [...this.listArr, ...res.data]; ///数据拼接
					// console.log("listArr:", this.listArr);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.root {

		.top {
			width: 100%;
			background-color: #5288F5;
			// border-bottom: 2px dashed #efefef;
			position: fixed; //吸顶效果
			top: var(--window-top);
			z-index: 10;

		}

		.scrollNav {
			height: 80rpx;
			background: #f7f8fa;
			white-space: nowrap; //不换行
			padding-top: 90rpx;
			position: fixed; //吸顶效果
			top: var(--window-top);
			z-index: 5; //层次深度

			.item {
				font-size: 35rpx;
				display: inline-block;
				line-height: 85rpx;
				padding: 0 30rpx;
				color: #333;

				&.active {
					color: #5288F5;
				}
			}
		}

		.content {
			padding: 180rpx 10rpx 30rpx 10rpx;

			.row {
				background-color: #ffffff;
				border-bottom: 1px dashed #efefef;
				// box-shadow: 10 10 1rpx rgba(15, 46, 19, 0.5);
				padding: 20rpx 0;
			}
		}

		.nodata {
			display: flex;
			justify-content: center;

			image {
				width: 360rpx;
			}
		}

		.loading {
			text-align: center;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}
	}
</style>
